<template>
  <section class="container" v-if="isShow">
    <div class="mask" @click="removeSpecsView"></div>
    <div class="content">
      <p class="title">{{ foodItem.name }}</p>
      <dl v-for="(item, index) in foodItem.specs" :key="index" class="list">
        <dt class="specs_name">{{ item.name }}：</dt>
        <dd
          :class="{ active: select[index] && select[index][0] == subIndex }"
          v-for="(subItem, subIndex) in item.option"
          :key="subIndex"
          @click="itemClick(index, subIndex, subItem)"
        >
          {{ subItem }}
        </dd>
      </dl>
      <footer class="add_cart">
        <div class="info">
          <div class="price">￥7</div>
          <span v-for="(item, index) in select" :key="index">
            {{ item[1] }}&nbsp;
          </span>
        </div>
        <div class="add">
          <button @click="addCart">添加购物车</button>
        </div>
      </footer>
    </div>
  </section>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  props: {
    food: {
      type: Object,
      default: function() {
        return {};
      }
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      foodItem: null, // 食品项
      select: {} // 选择的规格选项
    };
  },
  methods: {
    ...mapMutations(['ADD_CART']),
    // 隐藏规格组件
    removeSpecsView() {
      this.$emit('removeSpecsView');
      this.select = {};
    },
    itemClick(index, subIndex, subItem) {
      this.select[index] = [subIndex, subItem];
      // 让vue侦听到数据改变
      this.select = { ...this.select };
    },
    // 添加购物车
    addCart() {
      const arr = [];
      Object.keys(this.select).forEach(item => {
        arr.push(this.select[item][1]);
      });
      Object.assign(this.foodItem, { select: arr.join('、') });
      this.ADD_CART(this.foodItem);
      this.removeSpecsView();
    }
  },
  watch: {
    // 当食品项传递过来时，把规格选项改成数组
    food(value) {
      value.specs.forEach((item, index) => {
        if (item.option.indexOf(',') !== -1) {
          value.specs[index].option = item.option.split(',');
        }
      });
      this.foodItem = value;
    },
    isShow(value) {
      if (value === true) {
        this.foodItem.specs.forEach((item, index) => {
          this.select[index] = [0, item.option[0]];
          this.select = { ...this.select };
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    border-radius: 6px;
    z-index: 105;
    background-color: #fff;
    .title {
      text-align: center;
      margin: 10px 0;
    }
    .list {
      font-size: var(--font-size);
      margin-bottom: 15px;
      padding: 0 10px;
      .specs_name {
        margin-bottom: 8px;
      }
      dd {
        display: inline-block;
        min-width: 50px;
        height: 23px;
        line-height: 20px;
        text-align: center;
        margin-right: 8px;
        padding: 0 8px;
        border: 1px solid #ffb000;
      }
    }
    .add_cart {
      display: flex;
      justify-content: space-between;
      background-color: #eee;
      padding: 10px;
      border-radius: 0 0 6px 6px;
      .info {
        display: flex;
        align-items: flex-end;
        .price {
          color: red;
        }
        span {
          font-size: var(--font-min);
        }
      }
      button {
        font-size: var(--font-size);
        padding: 3px 8px;
        border-radius: 10px;
        color: #222;
        background-color: var(--color-base);
      }
    }
  }
  .active {
    color: #ffb000;
    background-color: #fffbf1;
  }
}
</style>
